import React, { Component } from 'react'

class Child extends Component {
  inputFn = (evt) => {
    // console.log(evt.target.value)
  }
  arr = []
  clickFn = (index) => {
    console.log(index)
    this.arr.splice(index,1)
    // 刷新视图

    this.forceUpdate()
  }
  keyUpFn = (evt) => {
    // 按下enter的同时 input框的值不为空
    if (evt.keyCode === 13 && evt.target.value !== '') {
      //判断数组是否为空  若为空 直接将input框的值赋值给数组
      if (this.arr === '') {
        this.arr.push(evt.target.value)
      } else {
        // 若数组不为空
        // 判断input框的value值在渲染的数组中是否已经存在
        if (this.arr.indexOf(evt.target.value) === -1) {
          // 若查询结果为-1 证明数组中没有这个值
          //将input框的值添加到数组后
          this.arr.push(evt.target.value)
        } else {
          // 若查询到已经有这个值 则弹出提示框并清空输入框
          alert('你输入的内容重复')
          evt.target.value = ''
        }
      }

      console.log(this.arr)
    }

    // 刷新视图

    this.forceUpdate()
  }

  render() {
    return (
      <div>
        <input type="text" onInput={this.inputFn} onKeyUp={this.keyUpFn} />
        {/* // 渲染位置 */}
        <div>
          {this.arr.map((item, index) => {
            return (
              <div key={item}>
                {item}
                <button onClick={this.clickFn.bind(this, index)}>删除</button>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}

export default Child
